@import './public';
@import './tool';

body,html{
    width: 100%;
    height: 100%;
}
.main {
    width: 100%;
    height: 100%;
    @include background('BG.png');
    .heart{
        width: 2.6rem;
        height: .89rem;
        @include background('btn_tilizhi.png');
        display: inline-block;
        margin: .05rem 0 0 .3rem;
        span{
            display: inline-block;
            width: 1rem;
            height: .6rem;
            margin:.22rem 0 0 .9rem;
            text-align: center;
            i{
                display: inline-block;
                width: .62rem;
                height: .45rem;
                text-align: center;
                margin-top: .07rem;
            }
        }
        p{
            display: inline-block;
            width: .6rem;
            height: .6rem;
        }
    }
    #rule {
        width: .75rem;
        height: .75rem;
        display: inline-block;
        margin: .15rem 0 0 6rem;
    }
    .bigBox{
        position: relative;
        @media screen and (max-device-height: 736px) {
            margin-top: 3.5rem;
        }
        margin-top: 4.45rem;
    }
    .bigLeft,.bigRight{
        width: 3rem;
        height: 2.8rem;
        display: inline-block;
    }
    .bigLeft{
        @include background('l_wait.png');
        margin-left: 1.28rem;
    }
    .bigRight{
        @include background('r_wait.png');
        margin-left: 1.68rem;
    }
    .headBox{
        width: 7rem;
        height: 3.28rem;
        @include background('mutou.png');
        position: absolute;
        top: 2.4rem;
        left: 1.52rem;
        .myHead,.robotHead{
            width: 1.14rem;
            height: 1.14rem;
            display: inline-block;
            margin-top: 1.83rem;
        }
        .myHead{
            margin-left: .61rem;
            border-radius: 50%;
            @include background('npc3.png');
        }
        .robotHead{
            margin-left: 3.45rem;
            @include background('renwu.png');
        }
    }
    .prizeBox{
        width: 4.58rem;
        height: 1.62rem;
        @include background('bg_100mb.png');
        margin: 2.97rem 0 0 2.78rem;
        overflow: hidden;
        position: relative;
        .prize{
            width: 3.46rem;
            height: .84rem;
            margin: .54rem 0 0 .45rem;
            display: inline-block;
        }
        .multiple{
            width: 1.45rem;
            height: 1.06rem;
            position: absolute;
            top: .17rem;
            right: .2rem;
        }
    }
    .board{
        width: 7.44rem;
        height: 1.77rem;
        position: relative;
        @include background('bg_mutou.png');
        margin:.12rem 0 0  1.28rem;       
        li{
            width: 1.72rem;
            height: 1.53rem;
            float: left;
            @include scaleDom(scale,1.3,.8);
        }
        #stone,#stoneToo{
            @include background('op_chui.png');
            margin: 0.1rem .3rem 0 .7rem;
        }
        #shear,#shearToo{
            @include background('op_jiandao.png');
            margin-top: .1rem;
        }
        #cloth,#clothToo{
            @include background('op_bu.png');
            margin: 0.1rem .7rem 0 .3rem;
        }
        #stoneToo,#shearToo,#clothToo{
            display: none;
        }
        .time30 {
            width: 7.6rem;
            height: 1.77rem;
            @include background('bg_time.png');
            z-index: 1;
            position: absolute;
            color: #fff;
            text-align: center;
            display: none;
            margin-left:.08rem;
            left: -.15rem;
            dt{
                font-size: .48rem;
                margin-top: .16rem;
            }
            dd{
                font-size: .48rem;
                color: #F6FF02;
                letter-spacing: 1px;
            }
        }
        #noFight{
            width: 7.44rem;
            height: 1.77rem;
            z-index: 1;
            position: absolute;
            display: none;
            margin-left:.08rem;
        }
        .againTip{
            @include textCenter('.74rem','1.46rem','#fff');
            width: 7.29rem;
            height: 1.46rem;
            @include background('op_onemore.png');
            position: absolute;
            top: -2.38rem;
            display: none;
        }
    }
    #fightClick,#winClick{
        width: 3.7rem;
        height: 1.05rem;
        display: inline-block;
        margin-top: .42rem;
    }
    #fightClick{
        @include background('btn_cecord.png');
        margin-left: 1rem;
        margin-right: .44rem;
    }
    #winClick{
        position: relative;
        @include background('btn_prize.png');
        i{
            position: absolute;
            width: .33rem;
            height: .33rem;
            top: .05rem;
            right: .3rem;
            @include background('redQ.png');
            display: none;
        }
    }
    .sendQrcodeFrame,.shareQrcodeFrame,.userFrame,.realShareFrame{
        @include shadeFull;
        .sjbTitle{
            width: 9.04rem;
            height: 4.33rem;
            @include background('sjbTitle.png');
            margin: .4rem 0 0 .6rem;
        }
        .QrcodeFrame,.shareFrame,.userQrcodeFrame,.realFrame{
            width: 8.9rem;
            height: 9.85rem; 
            @include background('frame_prize.png');
            margin-left:.82rem;
            position: relative;
            overflow: hidden;
            .shareCode{
                width: 3.26rem;
                height: 3.26rem; 
                margin: .25rem 0 0 2.88rem;
            }
            .QrcodeFrameText,.shareFrameText,.userFrameText,.congratulation{
                width: 6.3rem;
                height: auto; 
                margin: 1.5rem 0 0 1.3rem;
                @include textCenter(.36rem,.5rem,#B95D23);
                font-weight:600;
                line-height: .5rem;
            }
            .congratulation{
                margin-top: 2.55rem;
                span{
                    color: red;
                }
            }
        }
        .userQrcodeFrame{
            @include background('frameBang.png');
            .shareCode{
                margin-top: 3.3rem;
            }
            .userFrameText{
                margin-top: .5rem;
            }
        }
        .shareFrame{
            @include background('frame_tili.png');
            .shareCode{
                margin-top: 3.2rem;
            }
            .shareFrameText{
                width: 6.4rem;
                margin-left: 1.2rem;
                margin-top: .95rem;
                i{
                    display: inline-block;
                    width: .44rem;
                    height: .41rem; 
                    @include background('share1.png');
                }
            }
        }
        #sendShade,#shareShade{
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
        }
        #sendShade{
            opacity: .01;
        }
        .frameClose{
            width: .93rem;
            height: 1rem; 
            position: absolute;
            @include background('fullClose.png');
            right: .3rem;
            top: .3rem;
            z-index: 1111;
        }
        .icon_yd{
            width: 2.84rem;
            height: .93rem; 
            @include background('icon_yd.png');
            margin-left: 3.8rem;
            margin-top: .2rem;
        }
    }
    .realShareFrame{
        .sjbTitle{
            margin-top: 0;
        }
        .realFrame{
            width:7.96rem;
            height: 10.2rem; 
            @include background('frame_saoyisao.png');
            .nikeName,.myChou{
                @include textCenter(.53rem,.53rem,#5C291B);
                font-weight:600;
                margin-top: 1.9rem;
                width: 7rem;
                margin-left: .7rem;
                letter-spacing: .02rem;
            }
            .myChou{
                margin-top: .29rem;
                color: #B95D23;
                line-height: .6rem;
            }
            .shareCode{
                margin: .42rem 0 0 2.57rem;
            }
            .QrcodeFrameText{
                margin-top: 1.2rem;
            }
        }
    }
    .sendQrcodeFrame,.shareQrcodeFrame,.userFrame,.realShareFrame{
        @include background('BG_code.png');
    }
    .colorYellow{
        color: #F1FA02;
    }
    .guide,.winListFrame,.figthListFrame{
        position: absolute;
		overflow: hidden;
		display: none;
		top: 0;
		z-index: 998;
		width: 100%;
        height: 100%;
        @include background('frame_lc.png');
        .guideClose{
            width: 4rem;
            height: 3rem;
            margin: 6rem 0 0 3.37rem;
        }
    }
    .winListFrame,.figthListFrame{
        @include background('BG_code.png');
        .winListFrameClose,.figthFrameClose{
            width: .93rem;
            height: .93rem;
            position:absolute;
            right: .26rem;
            top: .26rem;
            @include background('fullClose.png');
        }
        .figthListBox{
            width: 9.2rem;
            height:15.37rem;
            @include background('bg_record.png');
            overflow: hidden;
            margin-left: .5rem;
        }
        .winBox,.fightBox{
            width: 8.2rem;
            height: 6.67rem;
            overflow-y: scroll;
            margin-left: .4rem;
            // @media screen and (min-device-height: 737px) {
            //     margin-top: 6rem;
            //     height: 7.67rem;
            // }
           
            span{
                flex: 1;
                display: inline-block;
            }    
            .myCoupon{
                position: absolute;
                width: 3.5rem;
                height: .6rem;
                font-size: .45rem;
                color: #F26C2A;
                font-weight: 600;
                left: .56rem;
                top: .24rem;
            }  
             .winStatus{
                position: absolute;
                width: 2.05rem;
                height: .58rem;
                right: .34rem;
                top: .24rem;
            } 
            .winDate{
                position: absolute;
                width:6.5rem;
                height: .58rem;
                font-size: .26rem;
                color: #FF6E27;
                left: .56rem;
                top: .88rem;
            }   
        }
        #enterCoupon{
            width: 7.77rem;
            height: 2.33rem;
            @include background('enterCoupon.png');
            margin-left: .6rem;
            display: block;
        }
    }
    .winListFrame{
        .figthListBox{
            @include background('bg_prize.png');
            .winBox{
                margin-top: 5.2rem;  
                height: 7rem;   
                .winBlock{
                    width: 7.61rem;
                    height: 1.45rem;
                    @include background('bg_ticket.png');
                    margin-left: .29rem;
                    position: relative;
                    margin-bottom: .2rem;
                }   
            }
        }
    }
    .figthListFrame{
        .myRecord,.myRank{
            display: inline-block;
            width: 4.6rem;
            height: 1.14rem;
            margin-top: 3.3rem;
        }
        .headBlock{
            display: flex;
            width: 8.2rem;
            height: 1.16rem;
            margin: .3rem 0 .2rem .5rem;
            span{
                flex: 1;
            }
            .headme,.vs,.headyou{
                width: 1.16rem;
                height: 1.16rem;
                position: relative;
                i{
                    height:.32rem;
                    display: inline-block;
                    position: absolute;
                    bottom: 0;
                    right: -.3rem;
                }
            }
            .headme{
                margin-left: .85rem;
                border-radius: 50%;
                @include background('npc3.png');
                i{
                    width: .68rem;
                    @include background('meHead.png');
                }
            }
            .vs{
                @include background('renwu.png');
                margin-left: .7rem;
                i{
                    width: .68rem;
                    @include background('bossHead.png');
                }
            }
            .headyou{
                @include background('jiangbei.png');
                margin-left: .5rem;
            }
        }
        .fightBox{
            width: 8.2rem;
            height: 8.5rem;         
            overflow-y: scroll;
            // @media screen and (min-device-height: 737px) {
            //     height: 10.84rem;
            // }          
            .hisDate{
                color: #FB7C27;
                margin: .2rem 0 0 .5rem;
            }
            .fightme,.fightyou{
                width: 1.06rem;
                height: 1.06rem;
            }
            .fightme{
                margin-left: .85rem;
                position: relative;
            }
            .fightyou{
                margin-left: .7rem;
            }
            .fightjian{
                @include background('record_jiandao.png');
            }
            .fightchui{
                @include background('record_chui.png');
            }
            .fightbu{
                @include background('record_bu.png');
            }
            .fightvs{
                width: .66rem;
                height: .46rem;
                @include background('vs.png');
                position: absolute;
                top: .5rem;
                right: -1.15rem;
            }
            .fightResult{
                width: 1.2rem;
                height: .66rem;
                margin-left: .5rem;
                margin-top: .3rem;
            }
            .fightwin{
                @include background('huosheng.png');
            }
            .fightping{
                @include background('pingju.png');
            }
            .fightfail{
                @include background('shibai.png');
            }
            .winBlock{
                margin-bottom: .2rem;
                display: flex;
            }
        }
        .rankTime{
            display: none;
            width: 7.92rem;
            height: .64rem; 
            margin-left: .58rem;
            @include textCenter(.32rem,.64rem,#fff);
            overflow: hidden;
            span{
                height:.64rem;                
                text-align: left;
                float: left;
                @include scrollX(scrollx);
                animation: scrollx 10s linear infinite;
            }   
        }
        #rank,#bangwai{
            display: none;
            width: 7.08rem;
            height: 5.5rem;
            margin: 3.3rem 0 0 1rem;
            border-bottom: 2px solid #F0E3CE;
            li{
                span{
                    display: inline-block;
                    height: .4rem;
                    margin-bottom: .1rem;
                    @include textCenter(.34rem,.4rem,#383838);
                }
                .mingci{
                    width: .58rem;
                    margin-left: .25rem;
                }
                .userId{
                    width: 2rem;
                    margin-left: .6rem;
                }
                .saoma{
                    width: 2.5rem;
                    margin-left: .7rem;
                    color: #FB7C27;
                }
            }
        }
        #bangwai{
            height: .55rem;
            margin-top: .1rem;
            border-bottom: 0;
            li{
                .mingci{
                    width: .82rem;
                    height: .5rem;
                    @include background('logo_bw.png');
                }
                span{
                    @include textCenter(.34rem,.55rem, #8155E4);
                }
                .saoma{
                    color: #8155E4;
                    margin-left: .5rem;
                }
            }           
        }
    }
    .resultShade{
        @include shadeFull;
        .resultFrame{
            width: 9rem;
            height: 4.75rem; 
            margin: 3.5rem 0 0 .49rem;
            position: relative;
            overflow: hidden;
            .frameClose{
                width: .93rem;
                height: 1rem; 
                position: absolute;
                right: 0;
                top: 1.5rem;
            }
            #resultText{
                width: 4.4rem;
                height: 2.2rem; 
                margin: 2.2rem 0 0 4rem;
                color: #FCB21F;
                font-size: .4rem;
                font-weight: 600;
                // display: flex;
                align-items: center;
                justify-content: center;
                flex-direction: column;
                text-align: center;
                span{
                    color: #F88438;
                }
            }
        }
    }
    .comText{
        @include shadeFull();
        z-index: 999;
        .comTextFrame{
            width: 7.26rem;
            height: 6.81rem;
            margin: 3.5rem 1.37rem 0;
            position: relative;
            overflow: hidden;
            @include background('comText.png');
             .frameClose{
                width: .93rem;
                height: 1rem; 
                position: absolute;
                right: 0;
                top:0;
             }
             #comText{
                width: 5.8rem;
                height: 3.8rem; 
                margin: 1.8rem 0 0 .6rem;
                @include textCenter(.4rem,.6rem,#f88438);
                display: flex;
                align-items: center;
                justify-content: center;
                flex-direction: column;
                .jiaTip{
                    display: inline-block;
                    width: 2.61rem;
                    height: 1.34rem; 
                    @include background('jiaTip.png');
                }
                .tip{
                    font-size: .6rem;
                    font-weight: 600;
                }
             }
        }
    }
    .redPink{
        color:#D4224E ;
    }

    .pptvmop,.rulemop{
        @include shadeFull;
    }
    .ruleFrame{
        width:7.62rem ;
        height:10.7rem ;
        margin: 0 auto;
       margin-top: 2rem;
        @include background('ruleFrame.png');
        background-size: 100% 100%; 
        overflow: hidden;
        .close{
            width:1rem ;
            height:1rem ;
            margin: 1rem 0 0 6.6rem;
        }
        #ruleUrl{
            width:6.7rem ;
            height:8rem ;
            margin-left: .3rem;
        }
    }
    .hpptv{
        width:8.53rem ;
        height:11.05rem ;
        position: absolute;
        top: 3rem;
        left: 0.63rem;
        @include background('chuanglian.png');
        background-size: 100% 100%;     
        .close{
            width:1rem ;
            height:1rem ;
            position: absolute;
            top:3.8rem ;
            right: 0;
        }
        .enter{
            width:4rem ;
            height:0.827rem ;
            position: absolute;
            top:76%;
            left: 2.3rem;
        }
    }
    
}


